<template>
  <view class="realname-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/Images/shop/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="title">实名认证</view>
    </view>
    
    <!-- 表单内容 -->
    <view class="form-container">
      <view class="form-header">
        <view class="form-title">请填写实名认证信息</view>
        <view class="form-subtitle">以保障您的资金账户安全</view>
      </view>
      
      <view class="form-section">
        <view class="section-title">请确认您的身份信息</view>
        
        <!-- 姓名输入 -->
        <view class="input-item">
          <view class="input-label">姓名</view>
          <input 
            class="input-field" 
            type="text" 
            placeholder="请输入本人姓名" 
            v-model="formData.name"
          />
        </view>
        
        <!-- 身份证输入 -->
        <view class="input-item">
          <view class="input-label">身份证</view>
          <input 
            class="input-field" 
            type="idcard" 
            placeholder="请输入本人身份证号" 
            v-model="formData.idCard"
          />
        </view>
        
        <!-- 手机号输入 -->
        <view class="input-item">
          <view class="input-label">手机号</view>
          <input 
            class="input-field" 
            type="number" 
            placeholder="请输入手机号" 
            v-model="formData.phone"
          />
        </view>
        
        <!-- 验证码输入 - 分成两个容器 -->
        <view class="verification-container">
          <!-- 左侧验证码输入框 -->
          <view class="input-item verification-code-input">
            <view class="input-label">验证码</view>
            <input 
              class="input-field code-field" 
              type="number" 
              placeholder="请输入验证码" 
              v-model="formData.code"
            />
          </view>
          
          <!-- 右侧发送验证码按钮 -->
          <view class="verification-code-btn">
            <button 
              class="send-code-btn" 
              :disabled="countdown > 0" 
              @click="sendVerificationCode"
            >
              {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
            </button>
          </view>
        </view>
      </view>
      
      <!-- 提示信息 -->
      <view class="tips-section">
        <view class="tip-title" style="color: #FF6B35;">提示：</view>
        <view class="tip-content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</view>
      </view>
      
      <!-- 协议同意 -->
      <view class="agreement-section">
        <view class="checkbox-container" @click="toggleAgreement">
          <view :class="['checkbox', {'checked': isAgreed}]"></view>
        </view>
        <view class="agreement-text">
          我已阅读并同意 <text class="agreement-link" @click="openAgreement">《XXX平台相关协议&使用规则》</text>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :style="isFormValid ? 'background-color: #FF3037 !important;' : 'background-color: #ccc !important;'"
        :disabled="!isFormValid" 
        @click="submitForm"
      >
        下一步
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 表单数据
const formData = ref({
  name: '',
  idCard: '',
  phone: '135****2654', // 默认显示部分隐藏的手机号
  code: ''
});

// 是否同意协议
const isAgreed = ref(false);

// 验证码倒计时
const countdown = ref(0);
let timer = null;

// 表单验证
const isFormValid = computed(() => {
  return formData.value.name.trim() !== '' && 
         formData.value.idCard.trim() !== '' && 
         formData.value.code.trim() !== '' && 
         isAgreed.value;
});

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 切换协议同意状态
const toggleAgreement = () => {
  isAgreed.value = !isAgreed.value;
};

// 打开协议
const openAgreement = () => {
  uni.showToast({
    title: '协议页面开发中',
    icon: 'none'
  });
};

// 发送验证码
const sendVerificationCode = () => {
  if (countdown.value > 0) return;
  
  // 模拟发送验证码
  uni.showToast({
    title: '验证码已发送',
    icon: 'success'
  });
  
  // 开始倒计时
  countdown.value = 60;
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 提交表单
const submitForm = () => {
  if (!isFormValid.value) return;
  
  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    
    // 跳转到认证成功页面
    uni.navigateTo({
      url: '/pages/common/success?type=verification'
    });
  }, 1500);
};

// 组件卸载时清除定时器
onMounted(() => {
  return () => {
    if (timer) {
      clearInterval(timer);
    }
  };
});
</script>

<style lang="scss">
.realname-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 导航栏 */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #ffffff;
  padding-top: var(--status-bar-height, 44px);
}

.back-btn {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

/* 表单容器 */
.form-container {
  padding: 40rpx 30rpx;
  background-color: #fff;
  margin-top: 0.5rem;
}

.form-header {
  margin-bottom: 60rpx;
}

.form-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.form-subtitle {
  font-size: 28rpx;
  color: #666;
}

.form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 40rpx;
}

/* 输入项 */
.input-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  background-color: #eee;
  margin-top: 0.5rem;
  border: 2px dotted #333;
}

.input-item:last-child {
  border-bottom: none;
}

.input-label {
  width: 140rpx;
  font-size: 30rpx;
  color: #333;
  margin-left: 0.5rem;
}

.input-field {
  flex: 1;
  height: 60rpx;
  font-size: 30rpx;
  color: #333;
}

/* 验证码 - 分成两个容器 */
.verification-container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  gap: 20rpx;
}

.verification-code-input {
  flex: 1;
  margin-top: 0;
}

.verification-code-btn {
  width: 220rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border: 2px dotted #333;
}

.code-field {
  width: 100%;
}

.send-code-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #FF3037;
  color: #fff;
  font-size: 26rpx;
  text-align: center;
  border-radius: 35rpx;
  padding: 0;
}

.send-code-btn[disabled] {
  background-color: #ccc;
  color: #fff;
}

/* 提示信息 */
.tips-section {
  margin-bottom: 40rpx;
}

.tip-title {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.tip-content {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

/* 协议同意 */
.agreement-section {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.checkbox-container {
  margin-right: 20rpx;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
  position: relative;
}

.checkbox.checked {
  border-color: #FF3037;
  background-color: #FF3037;
}

.checkbox.checked::after {
  content: '';
  position: absolute;
  left: 12rpx;
  top: 6rpx;
  width: 8rpx;
  height: 16rpx;
  border-right: 4rpx solid #fff;
  border-bottom: 4rpx solid #fff;
  transform: rotate(45deg);
}

.agreement-text {
  font-size: 26rpx;
  color: #666;
}

.agreement-link {
  color: #FF3037;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #FF3037;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  text-align: center;
  margin-top: 40rpx;
}

.submit-btn[disabled],
.btn-disabled {
  background-color: #ccc !important;
  color: #fff !important;
  opacity: 1;
}
</style>